<template>
	<view class="login-box" v-if="loginShow">
		<view class="center-box" :class="{'activeBox' :isDh }">
			<image class="img" src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/front/login/loginDef2.png"
				mode="widthFix">
			</image>
			<view class="close" @tap="closeLogin">
				<uni-icons type="closeempty" color="#000" size="26"></uni-icons>
			</view>
			<view class="title">欢迎来到{{mineProgramTitle || '新助邦'}}</view>
			<view class="btn-group position-relative">
				<button class="getPhone" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<img class="icon" src="../../static/image/icons/telIcon.png" />
					手机号授权快速登录
				</button>
				<view v-if="!agree" class="phoneMask" @click="decryptPhoneNumber"></view>
			</view>
			<view class="u-font-28 color333 flex align-center justify-center u-m-b-80 u-m-t-30" @click="agreeClick">
				<checkbox :checked="agree" class="agreeCheck" style="transform:scale(0.8)" />
				我已知晓并同意
				<text class="text-main-color" @click.stop="toService('service')">《用户协议》</text>
				和
				<text class="text-main-color" @click.stop="toService('personal')">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWxCode
	} from "@/utils/common.js"
	import {
		login,
		wxGetPhone
	} from "@/api/login.js"
	export default {
		name: 'uni-login',
		props: ['loginShow'],
		data() {
			return {
				agree:false,
				mineProgramTitle: "",
				mineProgramSubTitle: "",
				isDh: false,
				show: this.loginShow,
				sessionKey: {},
				wxCode: '',
				loginType: 1,
				loginForm: {
					appType: '',
					loginType: '',
					password: '',
					username: '',
					invitationCode: ''
				},
				verForm: {
					loginType: '',
					appType: '',
					phoneNumber: '',
					verificationCode: '',
					invitationCode: ''
				},
			}
		},
		watch: {
			loginShow(newV) {
				if (newV) {
					this.$nextTick(() => {
						this.isDh = true;
					})
				} else {
					this.isDh = false;
				}
			}
		},
		created() {
			if (uni.getStorageSync('mineProgramSys')) {
				let obj = JSON.parse(uni.getStorageSync('mineProgramSys'));
				this.mineProgramTitle = obj.mineProgramTitle;
				this.mineProgramSubTitle = obj.mineProgramSubTitle;
			}
		},
		mounted() {},
		methods: {
			toService(type) {
				uni.navigateTo({
					url: '/pages/service/service?type=' + type
				})
			},
			agreeClick() {
				this.agree = !this.agree
			},
			closeLogin() {
				this.$emit('closeLogin', this.show);
			},
			// 微信获取手机号登录登录
			decryptPhoneNumber(e) {
				if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意相关政策'
					})
					return
				}
				// #ifdef MP
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '登录中',
						mask: true
					})
					getWxCode().then((code) => {
						console.error('code===', code)
						this.wxCode = code
						let nowObj = {
							"loginType": "WECHAT_APPLET",
							"appType": 1,
							"authCode": this.wxCode
						}
						if (uni.getStorageSync("shareUserId")) {
							nowObj.u = uni.getStorageSync("shareUserId")
						}
						login(nowObj).then((res) => {
							uni.hideLoading()
							if (res.code == 100000) {
								uni.setStorageSync('token', res.data.access_token)
								// 因为这个接口要进行token验证，所以需要拿微信code先调用一次登录拿到token
								wxGetPhone({
									code: e.detail.code
								}).then((res2) => {
									let wxdata = Object.assign({
										phoneNumber: JSON.parse(res2.msg).phone_info.phoneNumber,
										uuid: res.data.uuid
									}, e.detail)
									this.loginApi('BIND_PHONE', wxdata)
								})
							}
						}).catch((err) => {
							uni.hideLoading()
						})
					})
				}
				// #endif
			},
			// 调用登录API(只有微信获取手机号登录才有type和loginData)
			loginApi(type, loginData) {
				let loginType = type ? type : (this.loginType == 1 ? 'PASSWORD' : 'SHORT_MESSAGE')
				let param = (this.loginType == 1 ? this.loginForm : this.verForm)
				if (type == 'BIND_PHONE') {
					// 微信获取手机号
					param = {
						"loginType": loginType,
						"uuid": loginData.uuid,
						"extraData": {
							"encryptedData": loginData.encryptedData,
							"iv": loginData.iv
						},
						"appType": 1,
						"phoneNumber": loginData.phoneNumber,
						"invitationCode": this.loginForm.invitationCode || this.verForm.invitationCode || ''
					}
				} else if (type == 'PHONE_QUICK') {
					param = {
						"phoneNumber": loginData.phoneNumber,
						"phoneQuickParam": {
							"accessToken": loginData.access_token,
							"openId": loginData.openid
						},
						"invitationCode": this.loginForm.invitationCode || this.verForm.invitationCode || ''
					}
				}
				// #ifdef MP
				param.appType = 1
				// #endif
				param.loginType = loginType //this.loginType==1?'PASSWORD':'SHORT_MESSAGE'
				// #ifdef MP
				if (!type) {
					param.wechatCode = this.wxCode
				}
				// #endif
				// 若是通过扫校园推广者的分享码进入的需要绑定二者之间的关系
				if (uni.getStorageSync("shareUserId")) {
					param.u = uni.getStorageSync("shareUserId")
				}
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				login(param).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						// 登录成功后将校园推广者的userId清除
						if (type == 'PHONE_QUICK') {
							uni.closeAuthView()
						}
						uni.setStorageSync('token', res.data.access_token)
						uni.setStorageSync('userId', res.data.userId)
						if (uni.getStorageSync('prePath')) {
							uni.removeStorageSync('prePath')
							this.closeLogin();
						} else {
							this.closeLogin();
						}
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style scoped lang='scss'>
	.getPhone {
		z-index: 1;
		width: 526rpx;
		border: none;
		border-radius: 15rpx;
		background-color: #F7DD5E;
		font-size: 28rpx;
		height: 86rpx;
		line-height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 4rpx;
		}
	}

	.getPhone::after {
		border: none;
	}

	.login-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		.activeBox {
			transform: translate3d(0px, 0px, 0px) !important;
		}

		.center-box {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 60rpx 0;
			border-radius: 16rpx 16rpx 0 0;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			text-align: center;
			transform: translate3d(0px, 100%, 0px);
			transition: all 0.15s linear 0s;

			.img {
				width: 640rpx;
				height: 270rpx;
			}

			.logo {
				position: absolute;
				top: -24rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 90rpx;
				height: 100rpx;
			}

			.close {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				font-size: 42rpx;
				margin: 66rpx 0 40rpx;
				text-align: center;
				color: rgba(0, 0, 0, 1);
				font-weight: 600;
			}

			.content {
				margin: 40rpx 0;
				font-size: 30rpx;
				font-family: "PingFang SC";
				letter-spacing: 0.6rpx;
				color: #212121;
				text-align: center;

				text {
					font-size: 32rpx;
					letter-spacing: 0.6rpx;
					color: rgba(69, 108, 255, 1);
				}
			}

			.btn-group {
				display: flex;
				justify-content: center;
				padding: 0 16rpx;
				.phoneMask{
					position: absolute;
					background-color: rgba(0,0,0,0);
					width: 526rpx;
					height: 86rpx;
					z-index: 10;
				}
				.invite-specia {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 526rpx;
					height: 86rpx;
					line-height: 86rpx;
					border-radius: 16rpx;
					text-align: center;
					background-color: #F7DD5E;
					font-size: 28rpx;
					color: #000;
				}
			}
		}
	}


	/* 获取手机号 */
	.login_phone_box {
		padding: 40rpx 30rpx 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		width: 75%;
		margin: 0 auto;

		& .title {
			font-size: 34rpx;
			color: #7d7d7d;
			margin: 0;
			margin-bottom: 60rpx;
			letter-spacing: unset;
		}

		& .operate {
			display: flex;
		}

		& button {
			border: none;
			font-size: 32rpx;
			color: #000;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			width: 200rpx;
			padding: 0;
			height: 80rpx;
			line-height: 80rpx;
			border-color: transparent;
			outline: unset;

			&.login {
				background-color: #fc742a;
				color: #fff;
			}
		}
	}
</style>